<template>
  <div class="meterage-manage">
    <div class="model-title-css">周数定义</div>
    <div class="background_wrap">
      <div class="operate_wrap flex">
        <div class="flex-center">
          <el-date-picker v-model="search.year" type="year" size="small" :clearable="false" @change="getList()" value-format="yyyy" placeholder="选择年">
          </el-date-picker>
          <el-button class="search" size="small" @click="updateWeek">&nbsp;修改</el-button>
        </div>

      </div>

      <!--======================================================================================================-->
      <!--·列表-->
      <!--======================================================================================================-->
      <div class="list_wrap">
        <div class="left-list WholeScroll">
          <div class="text-class" v-for="(item, index) in leftList" :key="index" :class="{ 'activecss-left': index == leftListIndex }" @click="(leftListIndex = index), (nowLeftId = item.id), getList(item),chooseMonth = item.name">
            {{item.name}}
          </div>
        </div>
        <div class="scroll-table-array WholeScroll">
          <p style="padding-left:15px">{{search.year}}年{{leftList[leftListIndex].name}}周数分解</p>
          <el-table class="project-management-info1" :border="true" height="610px" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="listOne" :height="tableHeight" @cell-click="cellClick" tooltip-effect="dark" style="
              width: 100%;
              font-family: PingFangSC-Regular;
              font-size: 14px;
            ">

            <el-table-column show-overflow-tooltip prop="xh" align="center" label="序号" width="100">
            </el-table-column>

            <el-table-column show-overflow-tooltip label="周数" width="400" prop="weekName">
            </el-table-column>

            <!-- <el-table-column show-overflow-tooltip label="所属半月度" width="400" prop="weekName">
              <template slot-scope="scope">
                {{search.year}}年{{leftList[leftListIndex].name}}{{scope.row.halfMonth==1?'上半月':'下半月'}}
              </template>
            </el-table-column> -->

            <el-table-column show-overflow-tooltip label="起始日期" prop="startDate">
              <template slot-scope="scope">
                {{scope.row.startDate.substring(0,10)}}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="结束日期" prop="endDate">
              <template slot-scope="scope">
                {{scope.row.endDate.substring(0,10)}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'
import msgUtil from '@/utils/msgUtil'
export default {
  name: `weeksDefinition`,
  components: {
    Detail: require('./weeksDefinition-detail').default,
  },
  data() {
    return {

      chooseMonth: '1月',
      permission: {
        add: ['100', '1001039:add'],
        edit: ['100', '1001039:edit'],
        del: ['100', '1001039:del'],
        show: ['100', '1001039:show'],
      },

      newRowName: '',
      tabClickIndex: '',
      tabClickLabel: '',
      addsdId: '', //隧道的id
      //constructionUnitOptions:[], // 公司
      projectOptions: [], // 项目
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      year: '2023',
      showYearState: false,
      addRowDialog: false,

      hasAdd: false,


      nowLeftId: '1',
      leftListIndex: 0,


      listOne: [],
      inputValue: '',
      imageProgressInfoListCopy: [],

      leftList: [
        { id: "1", name: "1月" },
        { id: "2", name: "2月" },
        { id: "3", name: "3月" },
        { id: "4", name: "4月" },
        { id: "5", name: "5月" },
        { id: "6", name: "6月" },
        { id: "7", name: "7月" },
        { id: "8", name: "8月" },
        { id: "9", name: "9月" },
        { id: "10", name: "10月" },
        { id: "11", name: "11月" },
        { id: "12", name: "12月" },
      ],

      // 搜索参数
      search: {
        searchName: '',
        pageIndex: 0,
        pageSize: 15,
        pageSum: 0,
        year: '2023',
        month: '1',


      },

      formData: {
        id: '',
        monthLabel: '',
        weekDataId: '',
        weekLabel: '',
        startDateLabel: '',
        endDateLabel: '',
      },
      projectTree: [],
      weekOption: [
        // {
        //   id: '1',
        //   name: '第一周'
        // }
      ],
      // 列类型表
      list: [],

      // 向详情子组件的传值
      postDetailData: {
        show: false,
        type: 'build',
        typeNmae: '新增',
      },
      // 向详情子组件的传值
      postDetailData2: {
        show: false,
        type: 'build',
        typeNmae: '新增',
      },
      /**
       * 流程提交数据
       * */
      reportData: {
        //  下一步接收人
        auditorIds: [],
        //  提交，审批意见
        content: '',
        //  被操作表单id
        id: '',
        //  附件表
        fileList: [],
      },

    }
  },
  created() {
    this.getList()
  },
  computed: {
    tableHeight: function () {
      return (window.innerHeight - 250) + 'px';
    }
  },
  methods: {
    getList(val) {
      let postData = {
        pageNo: 0,
        pageSize: 200,
        pageSum: 0,
        year: this.search.year,
        month: this.nowLeftId.replace('月', '')
      }
      this.listOne = []
      this.$httpPost('buss/weeksdefinition/listPage', postData).then((res) => {
        if (res.code == 200) {
          if (res.data.content.length > 0) {
            res.data.content[0].weekDetailDateList.forEach(item => {
              this.listOne.push(item)
            })
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取项目标段树失败")
      })


    },

    updateWeek() {
      this.postDetailData = {
        show: true,
        type: 'edit',
        typeName: '编辑',
        params: {
          searchYear: this.search.year,
          searchMonth: this.leftList[this.leftListIndex].name.replace('月', ''),
          month: this.search.year + '年' + this.leftList[this.leftListIndex].name
        },
      }
    },

    // 点击单元格
    clickRowspan(row, key) {
      this.$set(row, `isEdit_${key}`, true)
    },



    // 显示详情弹窗 不同状态
    showDetailDialog(flag, params) {
      console.log(flag, params)
      if (!params) {
        params = {}
      }
      switch (flag) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: 'build',
            typeName: '新增',
            params: params,
          }
          break
        case 'update':
          this.postDetailData = {
            show: true,
            type: 'edit',
            typeName: '编辑',
            params: params,
          }
          break
        case 'show':
          this.postDetailData = {
            show: true,
            type: 'check',
            typeName: '查看',
            params: params,
            isAudit: flag,
          }
          break
        case 'audit':
          this.postDetailData = {
            show: true,
            type: 'approve',
            typeName: '审批',
            params: params,
            isAudit: flag,
          }
          break
        case 'history':
          this.postDetailData = {
            show: true,
            type: 'history',
            typeName: '历史',
            params: params,
          }
          break
        case 'approve':
          this.postDetailData = {
            show: true,
            type: 'approve',
            typeName: '审批',
            params: params,
          }
          break
      }
    },
    // 列表的操作流程
    handleClickDeal(res, entity) {
      let that = this
      let type = res.type
      let detailId = res.detailId
      let url = res.url
      let name = res.name
      let actions = res.actions
      console.log(res)
      switch (type) {
        // 修改
        case 'update':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
            actions: actions,
          })
          break
        // 查看
        case 'show':
        case 'audit':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
            actions: actions,
            params: entity,
          })
          break
        // 上报、重新上报
        case 'report':
          this.$confirm('是否上报?', '提示', {
            confirmButtonClass: 'iconfont icon-icon_ok',
            cancelButtonClass: 'iconfont icon-icon_cancel',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              this.reportData.id = detailId
              this.reportData.auditorIds = entity.reportAuditUserId.split(',')
              this.sealDealHttp(url, '', this.reportData, () => {
                this.$messageSuccess('上报成功!')
              })
            })
            .catch(() => {
              console.log('请求出现错误')
            })

          break
        // 撤回上报
        case 'revokeReport':
          this.$prompt('撤回理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(({ value }) => {
              if (value === null || value === '') {
                this.$messageError('请填写撤回理由后重试')
                return
              }
              this.sealDealHttp(
                url,
                `?id=${detailId}&description=${value}`,
                () => {
                  this.$messageSuccess('撤回成功！')
                }
              )
            })
            .catch(() => {
              console.log('请求出现错误')
            })
          break
        // 删除
        case 'delete':
          if (detailId === '') {
            this.$messageError('请先选择要删除的记录！')
            return
          }
          this.$confirm('确定是否删除？', '提示', {
            confirmButtonClass: 'iconfont icon-icon_ok',
            cancelButtonClass: 'iconfont icon-icon_cancel',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              this.sealDealHttp(
                `/buss/monthlyreport/delete`,
                ``,
                {
                  ids: detailId.split(','),
                },
                () => {
                  this.$messageSuccess('删除成功!')
                }
              )
            })
          /*.catch(() => {
            console.log('请求出现错误')
          })*/
          break
        // 同意
        case 'agree':
          // 显示详情弹窗
          this.showDetailDialog('approve', {
            detailId: detailId,
            actions: actions,
          })
          break
        // 驳回
        case 'reject':
          this.$prompt('请输入驳回审批意见', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(({ value }) => {
              this.sealDealHttp(
                url,
                `?id=${detailId}&description=${value}`,
                () => {
                  this.$messageSuccess('驳回审批成功!')
                }
              )
            })
            .catch(() => {
              console.log('请求出现错误')
            })
          break
      }
    },


    // 事件处理的api请求
    sealDealHttp(url, query, param, callback) {
      this.$httpPost(url + query, param)
        .then((res) => {
          if (res.code === 200) {
            if (callback) callback(res)
            // 重新获取数据
            setTimeout(() => {
              this.getList(true)
            }, 1000)
          } else {
            this.$messageError(res.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          console.log(res)
        })
    },


    // 点击单元格
    cellClick(row, column, cell, event) {
      console.log(column)
      if (column.property === 'fillinDateStr') {
        this.showDialog('check', '查看', row.id)
      }
    },
  },
}
</script>

<style scoped lang="scss">
.operate_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  .el-button,
  .el-select,
  .el-input {
    border-radius: 4px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    display: inline-block;
  }
  .el-date-editor--daterange {
    width: 300px;
  }
  .add {
    width: 88px;
  }
  .push {
    background-color: rgb(277, 124, 42);
    border: none;
  }
  .delete {
    margin: 0 10px;
  }
  .search {
    width: 88px;
    float: right;
    color: #fff;
    margin-left: 10px;
  }
  .el-select {
    width: 240px;
    margin-left: 10px;
  }
  .input {
    width: 240px;
    float: right;
    margin-left: 10px;
    color: #3e556e;
  }
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.flex-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.list_wrap {
  margin-top: 20px;
  display: flex;
  // height: calc(100vh - 215px);
  // height: 100%;
  .left-list {
    width: 160px;
    padding: 10px 5px;

    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid #e2e8ec;
    .text-class {
      cursor: pointer;
      font-size: 16px;
      color: #444;
      margin: 5px auto;
      text-align: center;
      padding: 10px 0;
    }
    .activecss-left {
      background-color: #005fff;
      color: #fff !important;
    }
  }
  .scroll-table-array {
    // height: calc(100% - 130px) !important;
    height: 100%;
    overflow-y: auto;
    width: 100%;
    .engincontentNameTitleCss {
      font-size: 14px;
      font-weight: bold;
    }
    .engincontentNameChildCss {
      font-size: 14px;
      // font-weight: bold;
      padding-left: 20px;
    }
    .iconBox {
      i {
        cursor: pointer;
      }
    }
  }
}
.edit-box {
  display: flex;
  align-items: center;
}
.btnGroupAA {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 80px;
  padding: 0px;
  .btn-item {
    flex: 1;
    cursor: pointer;
  }
  // .el-button{
  //   padding: 7px;
  // }
}
</style>
<style lang="scss">
.btnGroupAAUnit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  .el-input-group__append {
    padding: 0 !important;
  }
}
</style>
